<template>
	<view class="flex flex-center gap-6 text-9  fs-14">
		<view class="line-1 w-60" :style="leftStyle"></view>
		<slot>分割线</slot>
		<view class="line w-60" :style="rightStyle"></view>
	</view>
</template>

<script setup>
import { computed } from 'vue';

	const props = defineProps({
		color: {
			type: String,
			default: '#959599' // 默认主色
		}
	})

	const leftStyle = computed(() => ({
		border: '1px solid',
		borderImage: `linear-gradient(90deg, rgba(216, 216, 216, 0), ${props.color}) 1 1`
	}))

	const rightStyle = computed(() => ({
		border: '1px solid',
		borderImage: `linear-gradient(90deg, ${props.color}, rgba(216, 216, 216, 0)) 1 1`
	}))
</script>

<style scoped>
	.line,
	.line-1 {
		height: 0;
	}
</style>